<template>
  <el-dropdown @command="handleCommand">
    <img class="lang" src="../../assets/image/langicon.png" />
    <template #dropdown>
      <el-dropdown-menu
        ><!-- command方法触发的时候会传参 -->
        <el-dropdown-item command="zh" :disabled="currentLanguage === 'zh'"
          >中文</el-dropdown-item
        >
        <el-dropdown-item command="en" :disabled="currentLanguage === 'en'"
          >English</el-dropdown-item
        >
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { computed } from "@vue/runtime-core";
import { useI18n } from "vue-i18n";
import { useStore } from "../../store/index";
const i18n = useI18n();
const store = useStore();
const currentLanguage = computed(() => {
  return i18n.locale.value;
});
const handleCommand = (val: string) => {
  //command方法触发的时候会传参
  i18n.locale.value = val;
  store.commit("changLang", val);
  localStorage.setItem("lang", val);
};
</script>

<style lang="scss" scoped>
:deep(.lang) {
  width: 20px;
  height: 20px;
  padding-right: 15px;
}
</style>